<a href="http://github.com/angular/angular.js/edit/master/docs/content/guide/dev_guide.templates.css-styling.ngdoc" class="improve-docs btn btn-primary"><i class="icon-edit"> </i> Improve this doc</a><h1><code ng:non-bindable=""></code>
<div><span class="hint"></span>
</div>
</h1>
<div><div class="developer-guide-page developer-guide-templates-working-with-css-in-angular-page"><p>Angular sets these CSS classes. It is up to your application to provide useful styling.</p>
<h2>CSS classes used by angular</h2>
<ul>
<li><p><code>ng-invalid</code>, <code>ng-valid</code></p>
<ul>
<li><strong>Usage:</strong> angular applies this class to an input widget element if that element&#39;s input does
not pass validation. (see <a href="api/ng.directive:input"><code>input</code></a> directive).</li>
</ul>
</li>
<li><p><code>ng-pristine</code>, <code>ng-dirty</code></p>
<ul>
<li><strong>Usage:</strong> angular <a href="api/ng.directive:input"><code>input</code></a> directive applies <code>ng-pristine</code> class
to a new input widget element which did not have user interaction. Once the user interacts with
the input widget the class is changed to <code>ng-dirty</code>.</li>
</ul>
</li>
</ul>
<h3>Related Topics</h3>
<ul>
<li><a href="guide/dev_guide.templates">Angular Templates</a></li>
<li><a href="guide/forms">Angular Forms</a></li>
</ul>
</div></div>
